<template>
  <div>
    <div v-if="cut">
      <a-button type="primary" @click="showModal" v-if="entryStore.token===''">请登录</a-button>
      <a-modal v-model:open="open" footer>
        <h3 class="title_login">用户登录</h3>
        <div class="username">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="username" class="login_input" placeholder="请输入账号" />
        </div>
        <div class="password">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" class="login_input" placeholder="请输入密码" />
        </div>
        <div class="user-type">
          <label for="userType">选择角色</label>
          <select v-model="userType">
            <option value="user">普通用户</option>
            <option value="root">管理员</option>
          </select>
        </div>
        <button @click="handleLogin" class="login-button">登录</button>
        <button @click="handleCut" class="cut-button">注册</button>
      </a-modal>
    </div>
    <div v-else>
      <a-button type="primary" @click="showModal">请登录</a-button>
      <a-modal v-model:open="open" @ok="handleOk" footer>
        <h3 class="title_login">用户注册</h3>
        <div class="username">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="username" class="login_input" placeholder="请输入账号" />
        </div>
        <div class="password">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" class="login_input" placeholder="请输入密码" />
        </div>
        <div class="pet">
          <label for="pet">社交昵称</label>
          <input type="text" id="pet" v-model="pet" class="pet_input" placeholder="请输入昵称" />
        </div>
        <button @click="handleCut" class="login-button_back">返回登录</button>
        <button @click="handleRegister" class="cut-button_back">注册</button>
      </a-modal>
    </div>
    <button v-if="entryStore.token!==''" class="login_token" @click="show_token">退出登录</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {useEntryStore} from '@/stores/entry'
const entryStore=useEntryStore()
let username = ref('');
let password = ref('');
let userType = ref('root');
let cut = ref(true);
let pet = ref('');
const open = ref(false);
const showModal = () => {
  open.value = true;
};

const handleOk = () => {
  open.value = false;
};

const handleCut = () => {
  cut.value = !cut.value;
};
const show_token=()=>{
  entryStore.token=''
  window.location.reload()
}

 async function handleLogin () {
  const uname = username.value.trim();
  const pwd = password.value.trim();
  if (uname === '' || pwd === '') {
    alert('账号或密码不能为空');
    username.value = '';
    password.value = '';
    return;
  }
  if (userType.value === 'root') {
    if (uname === '11041104' && pwd === '123456') {
      let response=await entryStore.sign_root({account: uname,password: pwd})
      console.log(response)
      if(response.data.code===0){
        entryStore.token=response.data.data.token;
        entryStore.id=-1;
        alert('登录成功')
      }
    } else alert('账号或密码错误');
  } else if (userType.value === 'user') {
    if (uname === 'user' && pwd === '123456') {
      let response=await entryStore.sign_user({account: uname,password: pwd})
      if(response.code==0){
        entryStore.token=response.data.token;
        entryStore.id=response.data.id
        alert('登录成功')
      }
      console.log(response.code); 
    } else alert('账号或密码错误');
  }
  open.value=false
  username.value = '';
  password.value = '';
};
async function handleRegister(){
  const uname = username.value.trim();
  const pwd = password.value.trim();
  const p=pet.value.trim();
  if (uname === '' || pwd === ''||p==='') {
    alert('账号,密码,昵称不能为空');
    username.value = '';
    password.value = '';
    return;
  }else{
    let response=await entryStore.sign_create({account: uname,password: pwd,name:p})
    if(response.data.code===0){
       open.value=false;
    }
  }
  username.value = '';
  password.value = '';
}
</script>

<style scoped>
.title_login {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.username,
.password {
  margin-bottom: 20px;
}

.login_input {
  width: 100%;
  height: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.3s;
}

.login_input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

select {
  width: 100%;
  height: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.login-button {
  width: 200px;
  height: 40px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
  transition: all 0.3s;
  &:focus{
    border-color:1px solid #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
  }
}
.login_token{
  position:fixed;
  top:10px;
  right:20px;
  background-color: #fff;
  color: #3498db;
  border: none;
  transition: all 0.3;
  &:hover{
    color: #aaa;
  }

}
.login-button:hover {
  background-color: #2980b9;
}
.cut-button{
  width: 200px;
  height: 40px;
  background-color: #fff;
  color: #2980b9;
  border: none;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
  margin-left: 70px;
  transition: all 0.3s;
  &:hover{
    border:1px solid #2980b9;
    color:#2980b9;
  }
}
.cut-button_back {
  width: 200px;
  height: 40px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border: 1px solid #2980b9;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
  margin-left: 70px;
  transition: all 0.3s;
  &:hover{
    border:1px solid #333;
    background-color: #40a9ff;
  }
}


.pet_input {
  margin-bottom: 20px;
  width: 100%;
  height: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.3s;
}
.login-button_back{
  width: 200px;
  height: 40px;
  background-color:white ;
  color: #aaa;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
  transition: all 0.3s;
  &:hover{
    border:1px solid #333;
    color:#333
  }
}
</style>
